<!--
 * @Author: AHANG
 * @Date: 2022-07-04 17:18:20
 * @LastEditors: AHANG
 * @LastEditTime: 2022-07-23 11:26:57
 * @Description: 
-->
<template>
  <div class="maps">
    <div id="container"></div>
  </div>
</template>

<script>
/* eslint-disable vue/multi-word-component-names */
// eslint-disable-next-line no-unused-vars
let map;
export default {
  name: "Index",
  data() {
    return {
      position: [
        {
          longitude: 0, //经度
          latitude: 0, //纬度
          city: "",
        },
      ],
    };
  },
  methods: {
    /**
     * /定位获得当前位置信息
     */
    getMyLocation() {
      // eslint-disable-next-line no-undef
      var geolocation = new qq.maps.Geolocation(
        "WOJBZ-HLW6U-F4ZVT-BCN44-GTID2-PUBRH",
        "ruleKey"
      );
      geolocation.getLocation(this.showPosition, this.showErr);
    },
    showPosition(position) {
      console.log(position);
      this.position.latitude = position.lat;
      this.position.longitude = position.lng;
      this.position.city = position.city;
      this.setMapData();
    },
    //定位失败再请求定位，测试使用
    showErr() {
      console.log("定位失败，请重试！");
      this.getMyLocation();
    },

    /**
     * 位置信息在地图上展示
     */
    setMapData() {
      // eslint-disable-next-line no-undef
      var myLatlng = new qq.maps.LatLng(
        this.position.latitude,
        this.position.longitude
      );
      var myOptions = {
        zoom: 20,
        center: myLatlng,
        // eslint-disable-next-line no-undef
        mapTypeId: qq.maps.MapTypeId.ROADMAP,
      };
      //获取dom元素添加地图信息
      // eslint-disable-next-line no-undef
      map = new qq.maps.Map(document.getElementById("container"), myOptions);

      //给定位的位置添加图片标注
      // eslint-disable-next-line no-undef
      marker = new qq.maps.Marker({
        position: myLatlng,
        map: map,
        draggable: true, //允许鼠标拖动
      });
    },
  },

  mounted() {
    this.getMyLocation();
  },
};
</script>

<style scoped>
#container {
  width: 87.5%;
  height: 70%;
  position: absolute;
}
</style>
